﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>地图坐标概念</title>
<script src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div id="map_container" style="width:800px;height:600px;"></div>
<script>
var map = new BMap.Map('map_container', {defaultCursor: 'default'});
map.centerAndZoom(new BMap.Point(113.37702, 23.128548), 19);

var TILE_SIZE = 256;

map.addEventListener('click', function(e){
  var info = new BMap.InfoWindow('', {width: 260});
  var projection = this.getMapType().getProjection();
  
  var lngLat = e.point;  
  var lngLatStr = "经纬度：" + lngLat.lng + ", " + lngLat.lat;
  
  var worldCoordinate = projection.lngLatToPoint(lngLat);
  var worldCoordStr = "<br />平面坐标：" + worldCoordinate.x + ", " + worldCoordinate.y;
  
  var pixelCoordinate = new BMap.Pixel(Math.floor(worldCoordinate.x * Math.pow(2, this.getZoom() - 18)), 
                                       Math.floor(worldCoordinate.y * Math.pow(2, this.getZoom() - 18)));
  var pixelCoordStr = "<br />像素坐标：" + pixelCoordinate.x + ", " + pixelCoordinate.y;
  
  var tileCoordinate = new BMap.Pixel(Math.floor(pixelCoordinate.x / 256),
                                 Math.floor(pixelCoordinate.y / 256));
  var tileCoordStr = "<br />图块坐标：" + tileCoordinate.x + ", " + tileCoordinate.y;
  
  var viewportCoordinate = map.pointToPixel(lngLat);
  var viewportCoordStr = "<br />可视区域坐标：" + viewportCoordinate.x + ", " + viewportCoordinate.y;
  
  var overlayCoordinate = map.pointToOverlayPixel(lngLat);
  var overlayCoordStr = "<br />覆盖物坐标：" + overlayCoordinate.x + ", " + overlayCoordinate.y;
  
  info.setContent(lngLatStr + worldCoordStr + pixelCoordStr + tileCoordStr + 
                  viewportCoordStr + overlayCoordStr);
  map.openInfoWindow(info, lngLat);
});
</script>
<h3>在地图上点击查看坐标</h3>
<h3><a href='http://api.map.baidu.com/lbsapi/getpoint/index.html'>百度拾取</a></h3>
</body>
</html>